<template>
  <div class="wrap">
    <div class="head">
      <span class="title">选集</span>
      <span v-if="enableMore" class="more" @click="openPopup">{{ pubText }}<i class="fa fa-dropright"></i></span>
    </div>
    <div class="body">
      <list-scroller
        v-if="epList.length"
        ref="epScroller"
        scrollX
      >
        <ul class="ep-list" ref="epListRef">
          <li class="ep-item"
            ref="epItem"
            v-for="item in epList"
            :key="item.id"
            :class="{active: currentEpisodeId === item.id, 'single-line': !item.long_title}"
            @click="selectEpisode(item)"
          >
            <h4 class="ep-title">{{ formatTitle(item.title, detailData.mediaInfo.type) }}</h4>
            <div v-if="item.long_title" class="ep-desc">{{ item.long_title }}</div>
            <div v-if="item.badge_info.text" class="ep-badge">{{ item.badge_info.text }}</div>
          </li>
        </ul>
      </list-scroller>
    </div>
    <div class="foot">
      <list-scroller
        v-if="seasons.length"
        ref="seasonScroller"
        scrollX
      >
        <ul class="season-list" ref="seasonListRef">
          <li
            class="season-item"
            v-for="item in seasons"
            :key="item.season_id"
            :class="{active: currentSeasonId === item.season_id}"
            @click="selectSeason(item)"
          >
            <div class="inner">{{ item.season_title }}</div>
          </li>
        </ul>
      </list-scroller>
    </div>
    <van-popup
      v-if="enableMore"
      ref="popRef"
      :style="{top: '255px'}"
    >
      <template #title>
        <span>选集({{ epList.length }})</span>
      </template>
      <ul class="ep-list">
        <li class="ep-item"
          v-for="item in epList"
          :key="item.id"
          :class="{active: currentEpisodeId === item.id, 'single-line': !item.long_title}"
          @click="selectEpisode(item)"
        >
          <h4 class="ep-title">{{ formatTitle(item.title, detailData.mediaInfo.type) }}</h4>
          <div v-if="item.long_title" class="ep-desc">{{ item.long_title }}</div>
          <div v-if="item.badge_info.text" class="ep-badge">{{ item.badge_info.text }}</div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { reactive, computed, toRefs, onUpdated, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import ListScroller from '@/components/ListScroller'
import VanPopup from '@/components/Popup'
export default {
  name: 'BangumiEpisode',
  components: {
    ListScroller,
    VanPopup
  },
  props: {
    detailData: {
      type: Object
    }
  },
  setup(props) {
    const router = useRouter()
    const getUpdateStr = (num, type) => {
      const i = Number(num)
      const n = type === 1 || type === 4 || type === '番剧' || type === '国创' ? '话' : '集'
      return isNaN(i) ? num : '第'.concat(i).concat(n)
    }
    const formatTitle = (value, type) => {
      return isNaN(value) ? value : ('第' + value + (type === 1 || type === 4 ? '话' : '集'))
    }
    const params = reactive({
      popRef: null,
      epListRef: null,
      seasonListRef: null,
      epScroller: null,
      seasonScroller: null,
      currentSeasonId: computed(() => (props.detailData?.ssId ?? -1)),
      currentEpisodeId: computed(() => (props.detailData?.epInfo?.id ?? -1)),
      pubInfo: computed(() => (props.detailData?.pubInfo ?? {})),
      pubText: computed(() => {
        const mediaInfo = props.detailData.mediaInfo
        if (mediaInfo.mode === 1) {
          return ''
        }
        if (params.pubInfo.is_finish === 1) {
          const type = mediaInfo.type === 1 || mediaInfo.type === 4 ? '话' : '集'
          return `全${mediaInfo.total || 1}${type}`
        }
        return `更新至${getUpdateStr(props.detailData.newestEp.title, mediaInfo.type)}`
      }),
      epList: computed(() => (props.detailData?.epList ?? [])),
      seasons: computed(() => (props.detailData?.seasonList ?? [])),
      enableMore: computed(() => params.epList.length > 3)      
    })
    const focusEp = () => {
      if (params.epListRef) {        
        const $el = params.epListRef.querySelector('.active')      
        $el && params.epScroller && params.epScroller.scrollToElement($el, 300)
      }      
    }

    const focusSeason = () => {      
      if (params.seasonListRef) {
        const $el = params.seasonListRef.querySelector('.active')      
        $el && params.seasonScroller && params.seasonScroller.scrollToElement($el, 300)
      }     
    }
    const openPopup = () => {
      params.popRef?.show()
    }

    const selectEpisode = episode => {
      const { id } = episode
      params.popRef?.hide()
      router.push({
        name: 'bangumi',
        params: {
          id: `ep${id}`
        }
      })
    }

    const selectSeason = season => {
      router.push({
        name: 'bangumi',
        params: {
          id: `ss${season.season_id}`
        }
      })
    }

    onMounted(() => {
      nextTick(() => {
        focusEp()
        focusSeason()
      })  
    })
        
    onUpdated(() => {
      nextTick(() => {
        focusEp()
        focusSeason()
      })
    })

    return {
      ...toRefs(params),
      openPopup,
      selectEpisode,
      selectSeason,
      formatTitle      
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    padding: {
      left: 10px;
      right: 10px;
    }
    @include border1px (#e7e7e7, 0 0 1px 0);
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .title{
    padding: {
      top: 10px;
      bottom: 10px;
    }
    font: {
      size: 16px;
      weight: 700;
    }
  }
  .more{
    font-size: 13px;
    color: $color-text-secondary;
    .fa{
      font-size: 16px;
    }
  }
  .ep-list{
    white-space: nowrap;
    padding: {
      top: 1px;
      bottom: 15px;
    }
  }
  .ep-item{
    position: relative;
    display: inline-block;
    width: 130px;
    height: 45px;
    padding: 5px 10px;
    margin-right: 10px;
    box-sizing: border-box;
    font-size: 12px;
    color: $color-text-regular;
    @include border1px(#ccc, 1px, 5px);
    &.active{
      @include border1px($theme-color, 1px, 5px);
      color: $theme-color;
    }
    &.single-line{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 40px;
    }
  }
  .ep-title{
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    line-height: 18px;
    @include max-lines(1);
  }
  .ep-desc{
    @include max-lines(1);
  }
  .ep-badge{
    position: absolute;
    right: 1px;
    top: 1px;
    padding: {
      left: 8px;
      right: 8px;
    }
    color: $color-white;
    background-color: $theme-color;
    border-radius: 0 0 0 8px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: top right;
  }

  .season-list{
    white-space: nowrap;
    padding-bottom: 16px;
  }
  .season-item {
    position: relative;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 8px 0 12px;
    margin: {
      right: 12px;
    };
    font-size: 12px;
    color: $color-text-regular;
    /* border: {
      style: solid;
      width: 1px 0;
      color: #e7e7e7;
    } */
    &:before,&:after{
      content: '';
      position: absolute;
      left: 2px;
      width: 100%;
      height: 16px;
      border: {
        style: solid;
        width: 0 1px;
        color: #e7e7e7
      }
    }
    &:before{
      top: 0;
      border-top-width: 1px;
      transform: skew(20deg);
    }
    &:after{
      top: 16px;
      border-bottom-width: 1px;
      transform: skew(-20deg);
    }
    &:first-child{
      padding-left: 10px;
      border-left: 1px solid #e7e7e7;
      &:before,&:after{
        border-left-width: 0;
      }
    }
    &:last-child{
      border-right: 1px solid #e7e7e7;
      &:before,&:after{
        border-right-width: 0;
      }
    }
    &.active{
      color: $theme-color;
      border-color: $theme-color;
      &:before,&:after{
        border-color: $theme-color;
      }
    }
  }

  .vpopup{
    .ep-list{
      white-space: normal;
      padding: {
        bottom: 0;
      }
    }
    .ep-item{
      width: 170px;
      height: 80px;
      margin: {
        right: 10px;
        bottom: 10px;
      }
      padding: 8px 10px;
      &.single-line{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 40px;
      }
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
    .ep-title{
      margin-bottom: 5px;
    }
    .ep-desc{
      @include max-lines(2);
      height: 32px;
    }
  }
  @media screen and (orientation:portrait) {
    .bpopup{
      top: 255px;
    }
  }
</style>